<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的音乐收藏</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <style>
        /* 整体页面通用样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面头部样式，打造精致导航栏 */
        header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: bold;
        }

        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        header nav ul li {
            margin-left: 30px;
        }

        header nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            transition: color 0.3s;
        }

        header nav ul li a:hover {
            color: #ccc;
        }

        /* 搜索区域样式，更具交互感 */
        #searchArea {
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px 30px;
            margin: 30px;
            border-radius: 10px;
            display: flex;
            align-items: center;
        }

        #searchArea input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-right: 15px;
            font-size: 18px;
            outline: none;
            transition: border-color 0.3s;
        }

        #searchArea input[type="text"]:focus {
            border-color: #007BFF;
        }

        #searchArea button {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 18px;
        }

        #searchArea button.btn-primary {
            background-color: #007BFF;
            color: white;
        }

        #searchArea button.btn-primary:hover {
            background-color: #0056b3;
        }

        #searchArea button.btn-secondary {
            background-color: #ccc;
            color: #333;
        }

        #searchArea button.btn-secondary:hover {
            background-color: #aaa;
        }

        #searchArea button.btn-danger {
            background-color: #dc3545;
            color: white;
        }

        #searchArea button.btn-danger:hover {
            background-color: #c82333;
        }

        /* 音乐列表展示区域样式，优化视觉效果 */
        #musicListContainer {
            margin: 0 30px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            background-color: white;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0;
        }

        th,
        td {
            padding: 20px 30px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
        }

        th {
            background-color: #f4f4f4;
            color: #333;
        }

        .btn {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }

        .music-checkbox {
            margin-right: 15px;
        }

        /* 操作按钮区域样式，添加图标提升直观性 */
        .operation-buttons {
            display: flex;
            align-items: center;
        }

        .operation-buttons button {
            margin-right: 15px;
        }

        .operation-buttons button i {
            margin-right: 5px;
        }

        /* 文件上传区域样式，增强美观度与易用性 */
        #uploadArea {
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px 30px;
            margin: 30px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            font-size: 18px;
        }

        #uploadArea label {
            margin-right: 15px;
        }

        #uploadArea input[type="submit"] {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 18px;
        }

        #uploadArea input[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* 底部版权信息样式，完善页面结构 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 30px;
            font-size: 16px;
        }
    </style>
    <script>
        let currentAudio = null; // 当前播放的音频

        $(function () {
            load(); // 页面加载时调用加载函数
        });

        // musicName的值可以为空
        function load(musicName) {
            $.ajax({
                url: "/lovemusic/findMusic",
                type: "get",
                data: { "musicName": musicName },
                dataType: "json",
                success: function (obj) {
                    // Check if obj is null
                    if (obj.data === null) {
                        alert("没有登录！");
                    }

                    var data = obj.data;
                    var s = '';
                    for (var i = 0; i < data.length; i++) {
                        var musicUrl = data[i].url + ".mp3";
                        s += '<tr>';
                        s += '<th><input class="music-checkbox" id="' + data[i].id + '" type="checkbox"></th>';
                        s += '<td>' + data[i].title + '</td>';
                        s += '<td>' + data[i].singer + '</td>';
                        s += '<td><button class="btn btn-primary" onclick="playerSong(\'' + musicUrl + '\')"><i class="fas fa-play"></i> 播放</button></td>';
                        s += '<td><button class="btn btn-primary" onclick="playernoSong(\'' + musicUrl + '\')"><i class="fas fa-pause"></i> 暂停</button></td>';
                        s += '<td class="operation-buttons">';
                        s += '<button class="btn btn-primary" onclick="confirmDelete(' + data[i].id + ')"> <i class="fas fa-trash"></i> 移除</button>';
                        s += '</td>';
                        s += '</tr>';
                    }
                    $("#info").html(s); // Append the constructed HTML to the element with id 'info'
                    $("#searchResults").text('找到 ' + data.length + ' 首音乐');
                }
            });
        }

        function playerSong(musicUrl) {
            if (currentAudio) {
                currentAudio.pause(); // 暂停当前播放的音乐
            }
            currentAudio = new Audio(musicUrl);
            currentAudio.play();
            // 显示当前播放歌曲信息，比如在页面某个固定位置展示歌曲名、歌手等
            updateNowPlayingInfo(musicUrl);
        }
        function playernoSong(musicUrl) {
                currentAudio.pause(); // 暂停当前播放的音乐
            $('#nowPlaying').text('')
        }
        function confirmDelete(id) {
            if (confirm("确定要删除这首音乐(ID: " + id + ")吗？")) {
                deleteInfo(id);
            }
        }

        // 批量删除函数
        function deleteSelected() {
            const selectedIds = [];
            $(".music-checkbox:checked").each(function () {
                selectedIds.push(this.id);
            });
            if (selectedIds.length === 0) {
                alert("请先选择要删除的音乐。");
                return;
            }
            if (confirm("确定要删除这些音乐吗？")) {
                // 这里可以实现批量删除的 AJAX 请求
                $.ajax({
                    url: "/lovemusic/deleteSel",
                    type: "post",
                    data: { selectedIds: selectedIds },
                    success: function (response) {
                        alert("删除成功！");
                        load(); // 重新加载音乐列表
                    },
                    error: function (error) {
                        alert("删除失败，请重试。");
                    }
                });
            }
        }

        // 删除歌曲的占位函数
        function deleteInfo(id) {
            $.ajax({
                url: "/lovemusic/deletelovemusic",
                type: "post",
                data: { id: id },
                success: function (response) {
                    alert("删除成功！");
                    load(); // 重新加载音乐列表
                },
                error: function (error) {
                    alert("删除失败，请重试。");
                }
            });
        }

        // 喜欢歌曲的占位函数（这里可根据实际情况拓展更多逻辑，比如判断是否已喜欢等）
        function loveInfo(id) {
            $.ajax({
                url: "/lovemusic/findLoveMusicByMusicIdAndUserId",
                data: {
                    musicid: id
                },
                type: "post",
                success: function (response) {
                    alert("操作成功！");
                },
                error: function (error) {
                    alert("操作失败，请重试。");
                }
            });
        }

        function lovemusic() {
            window.location.href = "/list.html";
        }

        // 新增函数，用于更新当前播放歌曲信息展示
        function updateNowPlayingInfo(musicUrl) {
            // 这里可以通过解析musicUrl等方式获取歌曲相关信息（如歌曲名、歌手），简单示例假设url里包含相关信息
            var parts = musicUrl.split('/');
            var songTitle = parts[parts.length - 1].replace('.mp3', '');
           songTitle = songTitle.split('=')[1]
            $('#nowPlaying').text(`正在播放：${songTitle}`);
        }
    </script>

</head>

<body>
<!-- 页面头部 -->
<header>
    <h1>我的音乐收藏</h1>
    <nav>
<!--        <ul>-->
<!--            <li><a href="#">首页</a></li>-->
<!--            <li><a href="#">歌单推荐</a></li>-->
<!--            <li><a href="#">歌手分类</a></li>-->
<!--        </ul>-->
    </nav>
</header>

<!-- 搜索区域 -->
<div id="searchArea">
    <input type="text" id="musicSearch" placeholder="搜索歌曲、歌手..." />
    <button class="btn btn-primary" onclick="load($('#musicSearch').val())">搜索</button>
    <button class="btn btn-secondary" onclick="load()">重置</button>
    <button class="btn btn-danger" onclick="deleteSelected()">批量删除</button>
    <button class="btn btn-danger" onclick="lovemusic()">返回主页</button>
</div>

<div id="searchResults"></div>

<!-- 当前播放歌曲信息展示 -->
<div id="nowPlaying" style="padding: 15px 30px; font-size: 18px; font-weight: bold;"></div>

<!-- 音乐列表展示容器 -->
<div id="musicListContainer">
    <table>
        <thead>
        <tr>
            <th>选择</th>
            <th>歌曲标题</th>
            <th>歌手</th>
            <th>播放</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="info">
        <!-- 音乐信息将填充到这里 -->
        </tbody>
    </table>
</div>

<!--&lt;!&ndash; 文件上传区域 &ndash;&gt;-->
<!--<div id="uploadArea">-->
<!--    文件上传：<input type="file" name="filename" />-->
<!--    歌⼿名: <label>-->
<!--    <input type="text" name="singer" placeholder="请输⼊歌⼿名" />-->
<!--</label>-->
<!--    <input type="submit" value="上传" />-->
<!--</div>-->

<!-- 底部版权信息 -->
<footer>
    &copy; 2025 我的音乐收藏
</footer>
</body>

</html>